<template>
    <view class="search">
        <Navigation title="搜索" background="#fff" />
        <view class="ph-40 pv-16 background-white">
            <u-search
                placeholder="请输入搜索内容"
                v-model="keyword"
                bgColor="#fff"
                borderColor="#CDCDCD"
                searchIconSize="29"
                searchIconColor="#999999"
                placeholderColor="#999999"
                @search="searchTap"
				:showAction="false"
               
            >
            </u-search>
            <view class="mt-48 f ai-c jc-s-b">
                <view class="fs-36 fw-500 text-color1">搜索历史</view>
                <image src="http://cwht.ricecs.cn/app/index/del.png" class="w-32 h-32"  @click="searchClear"></image>
            </view>
            <view class="f fc-w mt-24">
                <view class="h-70 ph-24 f ai-c history b-35 fs-24 text-color4 mr-16 mb-16" v-for="(item, index) in historyKeyword" :key="index" @click='toList(item)'>{{item}}</view>
            </view>
            <view class="mt-72 f ai-c jc-s-b">
                <view class="fs-36 fw-500 text-color1">热门搜索</view>
                <image src="http://cwht.ricecs.cn/app/index/refresh.png" class="w-32 h-32" @click="getHot"></image>
            </view>
			
            <view class="f fc-w mt-24 pb-24">
                <view class="h-70 ph-24 f ai-c history b-35 fs-24 text-color4 mr-16 mb-16" v-for="(item, index) in hotList" :key="index"  @click='toList(item.name)'>
                    <image src="http://cwht.ricecs.cn/app/index/fire.png" class="w-24 h-24 mr-8"></image>
                    {{item.name}}
                </view>
            </view>
        </view>
        <view class="hot pl-32">
            <u-scroll-list :indicator="false">
                <view class="hot-box w-580 b-24 mr-16" >
                    <image src="http://cwht.ricecs.cn/app/index/hot-title.png" class="w-580 h-106 hot-img"></image>
                    <view class="ph-8 pb-8 w-580">
                        <view class="f ai-c pl-20 h-106">
                            <image src="http://cwht.ricecs.cn/app/index/hot.png" class="w-35 h-35 mr-12"></image>
                            <view class="fs-36 fw-600 text-color7">热销商品</view>
                        </view>
                        <view class="b-24 background-white ph-20">
                            <view class="f ai-c jc-s-b pt-20 pb-25 goods" v-for="(item, index) in shopList" :key="index" @click="toDetail(item)">
                                <image :src="item.picUrl" class="w-120 h-120 b-24"></image>
                                <view class="f f1 ml-20 fd-c">
                                    <view class="fs-28 fw-600 text-color4 text-ellipsis-1">{{item.name}}</view>
                                    <view class="f ai-c mt-6">
                                        <view class="fs-26 fw-600 text-color7 mr-8">¥{{item.price}}</view>
                                        <view class="fs-22 text-color3 oldPrice">¥{{item.originalPrice}}</view>
                                    </view>
                                    <view><view class="fs-22 ph-8 pt-1 top mt-6">TOP{{index+1}}</view></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
				<view class="hot-box w-580 b-24 mr-16" >
                    <image src="http://cwht.ricecs.cn/app/index/hot-title.png" class="w-580 h-106 hot-img"></image>
                    <view class="ph-8 pb-8 w-580">
                        <view class="f ai-c pl-20 h-106">
                            <image src="http://cwht.ricecs.cn/app/index/hot.png" class="w-35 h-35 mr-12"></image>
                            <view class="fs-36 fw-600 text-color7">热销商品</view>
                        </view>
                        <view class="b-24 background-white ph-20">
                            <view class="f ai-c jc-s-b pt-20 pb-25 goods" v-for="(item, index) in shopList" :key="index" @click="toDetail(item)">
                                <image :src="item.picUrl" class="w-120 h-120 b-24"></image>
                                <view class="f f1 ml-20 fd-c">
                                    <view class="fs-28 fw-600 text-color4 text-ellipsis-1">{{item.name}}</view>
                                    <view class="f ai-c mt-6">
                                        <view class="fs-26 fw-600 text-color7 mr-8">¥{{item.price}}</view>
                                        <view class="fs-22 text-color3 oldPrice">¥{{item.originalPrice}}</view>
                                    </view>
                                    <view><view class="fs-22 ph-8 pt-1 top mt-6">TOP{{index+1}}</view></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </u-scroll-list>
        </view>
    </view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import {  spuPage } from '@/services/api/shop/index';
	import { dictDataType } from '@/services/api/dict';
	const keyword = ref('');
	const shopList = ref<any[]>([]);
	const historyKeyword = ref<any[]>([]);
	const hotList = ref<any[]>([]);
	
	onShow(() => {
		historyKeyword.value = uni.getStorageSync('search_keyword')
		getSpuPage()
		getHot()
	})
	async function getHot() {
	    const { data } = await dictDataType({ type: 'hot_keyword' });
		data.forEach((item:any)=>{
			item.name = item.label
		})
	    hotList.value = data.sort(() => Math.random() - 0.5);;
	}
	async function getSpuPage() {
		spuPage({ pageNo: 1, pageSize: 10, type: 1, sortAsc: true }).then((res: any) => {
		    shopList.value = res.data.list;
		});
	}
	function searchClear(){
		uni.setStorageSync('search_keyword',[]);
		historyKeyword.value = [];
	}
	function searchTap(){
		if(keyword.value){
			
		}else{
			uni.showToast({
			    title: '请输入关键词',
			    icon: 'none',
			});
			return;
		}
		let ls = historyKeyword.value;
		if(ls){
			ls.push(keyword.value);
		}else{
			ls = [keyword.value];
		}
	
		historyKeyword.value = ls;
		uni.setStorageSync('search_keyword',historyKeyword.value);
		uni.navigateTo({
			url:'/pages_shop/recommend?keyword='+keyword.value
		})
	}
	

	function toList(data: string) {
	    uni.navigateTo({
	        url: `/pages_shop/recommend?keyword=${data}`,
	    });
	}
	//商品详情
	function toDetail(data: any) {
	    uni.navigateTo({
	        url: `/pages_shop/productDetails/index?id=${data.id}`,
	    });
	}
</script>
<style lang="scss" scoped>
.search {
    background: #f5f5f5;
    min-height: 100vh;
    .background-white {
        background: #fff;
    }
    .hot {
        .hot-box {
            position: relative;
            background-image: linear-gradient(0deg, #fff9f5 0%, #ffd6d6 100%);
            .hot-img {
                position: absolute;
                left: 0;
                top: 0;
            }
            .goods {
                border-bottom: 1px solid #f5f5f5;
                .top {
                    background: #fff5ed;
                    border-radius: 4rpx;
                    color: #fa7f28;
                    display: inline-block;
                }
            }
            .oldPrice {
                text-decoration: line-through;
            }
        }
    }
    .history {
        background: #f5f5f5;
    }
    ::v-deep .u-search__content {
        box-shadow: 0 2rpx 12rpx 0 #f5f5f5 !important;
        border-radius: 8rpx !important;
        height: 96rpx !important;
        width: 548rpx !important;
    }
    ::v-deep .u-search__action--active {
        font-weight: 500 !important;
        font-size: 32rpx !important;
        color: #222222 !important;
    }
}
</style>
